<template>
    <div class="map_area"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { getChinaMap } from "../../api/intelligentDetection";
const cityData = ref([
    { name: '济南市', value: 39 },
    { name: '青岛市', value: 42 },
    { name: '烟台市', value: 47 },
    { name: '潍坊市', value: 46 },
    { name: '临沂市', value: 41 },
    { name: '日照市', value: 41 },
    { name: '德州市', value: 38 },
    { name: '聊城市', value: 39 },
    { name: '济宁市', value: 50 },
    { name: '泰安市', value: 30 },
    { name: '东营市', value: 27 },
    { name: '威海市', value: 43 },
    { name: '滨州市', value: 38 },
    { name: '菏泽市', value: 32 },
    { name: '枣庄市', value: 30 },
    { name: '淄博市', value: 42 },
]);
onMounted(() => {
    var myChart = echarts.init(
        document.querySelector(".map_area") as HTMLElement
    );
    myChart.showLoading();
    getChinaMap.then((res: any) => {
        // 得到结果后，关闭动画
        myChart.hideLoading();
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap("SD", res.data);
        var option = {
            title: {
                text: '全省设备分布处',
                left: 'center',  // 标题水平居中
                top: '10px',     // 标题距离顶部 10px
                textStyle: {
                    color: "#fff",
                    fontSize: 18
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}', // 格式化提示框
            },
            visualMap: {
                min: 27,
                max: 50,
                left: 'right',
                top: 'bottom',
                text: ['High', 'Low'],
                calculable: true,
                inRange: {
                    color: ['#e0ffff', '#006edd'], // 颜色从浅蓝到深蓝
                },
            },
            series: [
                {
                    name: '设备分布',
                    type: 'map',
                    map: 'SD', // 注册的山东省地图
                    roam: false, // 允许缩放和平移
                    label: {
                        show: true,
                    },
                    data: cityData.value,
                },
            ],
        };
        myChart.setOption(option);
    });
});
</script>
<style lang="css" scoped>
.map_area {
    width: 690px;
    height: 290px;
}
</style>